<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>生死数据统计</a-breadcrumb-item>
      <a-breadcrumb-item>死亡率趋势分析</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">死亡率趋势分析</div>
        <div class="header-subtitle">阴曹地府 · 生死数据统计</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <LineChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日死亡率</div>
              <div class="stat-value">{{ todayDeathRate }}</div>
              <div class="stat-label">‰</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card trend-up-stat">
            <div class="stat-icon">
              <RiseOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">月环比增长</div>
              <div class="stat-value">{{ monthGrowth }}%</div>
              <div class="stat-label">较上月</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card trend-down-stat">
            <div class="stat-icon">
              <FallOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">年均死亡率</div>
              <div class="stat-value">{{ yearAvgRate }}</div>
              <div class="stat-label">‰</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card warning-stat">
            <div class="stat-icon">
              <ExclamationCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">异常波动区</div>
              <div class="stat-value">{{ abnormalRegions }}</div>
              <div class="stat-label">个地区</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 死亡率年度趋势 -->
        <a-col :xs="24" :lg="12">
          <a-card title="死亡率年度趋势" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="yearlyTimeRange" style="width: 120px">
                <a-select-option value="5">近5年</a-select-option>
                <a-select-option value="10">近10年</a-select-option>
                <a-select-option value="20">近20年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="yearlyTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 死亡率月度分布 -->
        <a-col :xs="24" :lg="12">
          <a-card title="死亡率月度分布" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="monthlyYear" style="width: 100px">
                <a-select-option value="2024">2024年</a-select-option>
                <a-select-option value="2023">2023年</a-select-option>
                <a-select-option value="2022">2022年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="monthlyDistributionOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 季节性死亡率分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="季节性死亡率分析" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="seasonalAnalysisOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 死亡率预测模型 -->
        <a-col :xs="24" :lg="12">
          <a-card title="死亡率预测模型" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="predictionPeriod" style="width: 120px">
                <a-select-option value="3">未来3个月</a-select-option>
                <a-select-option value="6">未来6个月</a-select-option>
                <a-select-option value="12">未来1年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="predictionOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区死亡率热力图 -->
        <a-col :xs="24">
          <a-card title="地区死亡率热力图" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="heatmapOption" style="height: 500px" />
            </div>
          </a-card>
        </a-col>

        <!-- 死亡率因子相关性分析 -->
        <a-col :xs="24" :lg="16">
          <a-card title="死亡率因子相关性分析" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="correlationOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 统计摘要 -->
        <a-col :xs="24" :lg="8">
          <a-card title="统计摘要" :bordered="false" class="summary-card">
            <div class="summary-list">
              <div class="summary-item">
                <span class="summary-label">最高死亡率月份：</span>
                <span class="summary-value">{{ highestMonth }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">最低死亡率月份：</span>
                <span class="summary-value">{{ lowestMonth }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">波动最大地区：</span>
                <span class="summary-value">{{ mostVolatileRegion }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">标准差：</span>
                <span class="summary-value">{{ standardDeviation }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">变异系数：</span>
                <span class="summary-value">{{ coefficientVariation }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">同比增长率：</span>
                <span class="summary-value">{{ yearOverYearGrowth }}%</span>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { LineChartOutlined, RiseOutlined, FallOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, HeatmapChart, RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, CalendarComponent, VisualMapComponent } from 'echarts/components'

// 注册 ECharts 组件
use([CanvasRenderer, LineChart, BarChart, HeatmapChart, RadarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, CalendarComponent, VisualMapComponent])

// 响应式数据
const loading = ref(false)
const yearlyTimeRange = ref('10')
const monthlyYear = ref('2024')
const predictionPeriod = ref('6')

// 生成大量假数据
const todayDeathRate = ref('8.47')
const monthGrowth = ref('+2.3')
const yearAvgRate = ref('7.92')
const abnormalRegions = ref('3')
const highestMonth = ref('1月（冬季）')
const lowestMonth = ref('7月（夏季）')
const mostVolatileRegion = ref('北方山区')
const standardDeviation = ref('1.23')
const coefficientVariation = ref('15.5')
const yearOverYearGrowth = ref('-1.8')

// 生成年度趋势数据
const generateYearlyData = () => {
  const data = []
  const years = []
  const baseRate = 7.5

  for (let i = 0; i < 10; i++) {
    const year = 2024 - i
    years.unshift(year)
    // 模拟波动，增加一些随机性和趋势
    const trend = i * 0.1 // 轻微上升趋势
    const randomFactor = (Math.random() - 0.5) * 2
    const rate = baseRate + trend + randomFactor
    data.unshift(parseFloat(rate.toFixed(2)))
  }

  return { years, data }
}

// 年度趋势图表配置
const yearlyTrendOption = computed(() => {
  const { years, data } = generateYearlyData()

  return {
    title: {
      text: '历年死亡率趋势',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: (params) => {
        return `${params[0].axisValue}年<br/>死亡率: ${params[0].value}‰`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: years,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '死亡率 (‰)',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '死亡率',
        type: 'line',
        smooth: true,
        data: data,
        lineStyle: {
          width: 3,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#667eea' },
              { offset: 1, color: '#764ba2' }
            ]
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(102, 126, 234, 0.4)' },
              { offset: 1, color: 'rgba(118, 75, 162, 0.1)' }
            ]
          }
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: '平均值' }]
        }
      }
    ]
  }
})

// 月度分布数据
const monthlyDistributionOption = computed(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const data2024 = [9.2, 8.9, 8.1, 7.8, 7.5, 7.2, 6.8, 7.0, 7.5, 8.0, 8.5, 9.0]
  const data2023 = [9.0, 8.7, 7.9, 7.6, 7.3, 7.0, 6.6, 6.8, 7.3, 7.8, 8.3, 8.8]

  return {
    title: {
      text: '月度死亡率分布',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['2024年', '2023年'],
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999', rotate: 45 }
    },
    yAxis: {
      type: 'value',
      name: '死亡率 (‰)',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '2024年',
        type: 'bar',
        data: data2024,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#ff7675' },
              { offset: 1, color: '#fd79a8' }
            ]
          }
        }
      },
      {
        name: '2023年',
        type: 'bar',
        data: data2023,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#74b9ff' },
              { offset: 1, color: '#0984e3' }
            ]
          }
        }
      }
    ]
  }
})

// 季节性分析雷达图
const seasonalAnalysisOption = computed(() => {
  return {
    title: {
      text: '季节性死亡率雷达分析',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['2024年', '2023年', '2022年'],
      top: 30
    },
    radar: {
      indicator: [
        { name: '春季', max: 10 },
        { name: '夏季', max: 10 },
        { name: '秋季', max: 10 },
        { name: '冬季', max: 10 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)']
        }
      },
      axisLine: { lineStyle: { color: '#666' } },
      splitLine: { lineStyle: { color: '#666' } }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [7.8, 6.9, 7.8, 9.1],
            name: '2024年',
            lineStyle: { color: '#ff7675' },
            areaStyle: { color: 'rgba(255, 118, 117, 0.3)' }
          },
          {
            value: [7.6, 6.7, 7.6, 8.9],
            name: '2023年',
            lineStyle: { color: '#74b9ff' },
            areaStyle: { color: 'rgba(116, 185, 255, 0.3)' }
          },
          {
            value: [7.9, 6.8, 7.9, 9.2],
            name: '2022年',
            lineStyle: { color: '#00b894' },
            areaStyle: { color: 'rgba(0, 184, 148, 0.3)' }
          }
        ]
      }
    ]
  }
})

// 预测模型图表
const predictionOption = computed(() => {
  const historicalMonths = ['1月', '2月', '3月', '4月', '5月', '6月']
  const predictionMonths = ['7月', '8月', '9月', '10月', '11月', '12月']
  const historicalData = [9.2, 8.9, 8.1, 7.8, 7.5, 7.2]
  const predictionData = [6.9, 7.1, 7.6, 8.1, 8.6, 9.1]

  return {
    title: {
      text: '死亡率预测模型',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['历史数据', '预测数据', '置信区间'],
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [...historicalMonths, ...predictionMonths],
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '死亡率 (‰)',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '历史数据',
        type: 'line',
        data: [...historicalData, ...Array(6).fill(null)],
        lineStyle: { width: 3, color: '#74b9ff' },
        itemStyle: { color: '#74b9ff' }
      },
      {
        name: '预测数据',
        type: 'line',
        data: [...Array(6).fill(null), ...predictionData],
        lineStyle: { width: 3, color: '#ff7675', type: 'dashed' },
        itemStyle: { color: '#ff7675' }
      }
    ]
  }
})

// 热力图数据
const heatmapOption = computed(() => {
  const regions = ['华北', '东北', '华东', '华中', '华南', '西北', '西南']
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const data = []

  for (let i = 0; i < regions.length; i++) {
    for (let j = 0; j < months.length; j++) {
      const value = (Math.random() * 5 + 6).toFixed(1)
      data.push([j, i, value])
    }
  }

  return {
    title: {
      text: '各地区月度死亡率热力图',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      position: 'top',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    grid: {
      height: '60%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: months,
      splitArea: { show: true },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'category',
      data: regions,
      splitArea: { show: true },
      axisLabel: { color: '#999' }
    },
    visualMap: {
      min: 6,
      max: 11,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '5%',
      inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d']
      }
    },
    series: [
      {
        name: '死亡率',
        type: 'heatmap',
        data: data,
        label: {
          show: true,
          color: '#fff'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 相关性分析图表
const correlationOption = computed(() => {
  return {
    title: {
      text: '死亡率影响因子相关性',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['正相关', '负相关'],
      top: 30
    },
    radar: {
      indicator: [
        { name: '气温', max: 1 },
        { name: '空气质量', max: 1 },
        { name: '经济指数', max: 1 },
        { name: '医疗资源', max: 1 },
        { name: '人口密度', max: 1 },
        { name: '老龄化率', max: 1 },
        { name: '疾病爆发', max: 1 },
        { name: '自然灾害', max: 1 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)']
        }
      }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [0.3, 0.7, -0.4, -0.8, 0.5, 0.9, 0.8, 0.6],
            name: '相关系数',
            lineStyle: { color: '#fd79a8' },
            areaStyle: { color: 'rgba(253, 121, 168, 0.3)' }
          }
        ]
      }
    ]
  }
})

onMounted(() => {
  // 初始化数据加载
  loading.value = false
})
</script>

<style scoped>
.statistics-page {
  padding: 24px;
  min-height: 100vh;
}

.page-breadcrumb {
  margin-bottom: 16px;
}

.page-breadcrumb :deep(.ant-breadcrumb-link) {
  color: #d4990a;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 32px;
}

.header-content {
  margin-bottom: 16px;
}

.ancient-title {
  font-size: 32px;
  font-weight: bold;
  color: #d4990a;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', 'KaiTi', serif;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #8fa4b8;
  font-family: 'STKaiti', 'KaiTi', serif;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.decoration-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4990a, transparent);
}

.decoration-symbol {
  color: #d4990a;
  font-size: 20px;
}

.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 32px;
  opacity: 0.8;
}

.primary-stat .stat-icon {
  color: #74b9ff;
}
.trend-up-stat .stat-icon {
  color: #00b894;
}
.trend-down-stat .stat-icon {
  color: #fd79a8;
}
.warning-stat .stat-icon {
  color: #fdcb6e;
}

.stat-content {
  text-align: left;
}

.stat-title {
  font-size: 14px;
  color: #b3c5d1;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #8fa4b8;
}

.main-content {
  margin-top: 32px;
}

.chart-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.chart-card :deep(.ant-card-head-title) {
  color: #d4990a;
  font-weight: 600;
}

.chart-card :deep(.ant-card-body) {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 0 0 8px 8px;
}

.chart-container {
  width: 100%;
}

.summary-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.summary-card :deep(.ant-card-head-title) {
  color: #d4990a;
  font-weight: 600;
}

.summary-card :deep(.ant-card-body) {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 0 0 8px 8px;
}

.summary-list {
  space-y: 16px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  color: #b3c5d1;
  font-size: 14px;
}

.summary-value {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
</style>
